<template>
<div>
    <van-loading type="spinner" color="#1989fa"  v-if="isShow"/>
     <div v-else>
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
            <img :src="datail.hd_url" alt="">                                                           
        </van-swipe-item>
       <van-swipe-item>
            <img :src="datail.hd_thumb_url" alt="">
        </van-swipe-item>
    </van-swipe>
    <div class="title"> {{datail.goods_name}}</div>
    <div class="price">￥<em>{{datail.normal_price}}</em></div>
    <div class="fee"><span>快递：20元</span><i>{{datail.sales_tip}}</i></div>
    <div class="evaluate">              
        <h5>商品评价(11) </h5>
        <div class="pingjia" v-for="itme in 3">
            <div class="touxiang"><img src="https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3818670604,1923994441&fm=26&gp=0.jpg" alt=""><span class="name">11</span></div>
            <p class="pinglun">不错，很好</p>
            <p class="time">2020-9-17</p>
        </div>
        <div class="seewrap">
            <div class="see">
                <!-- <a href="">
                    查看更多评价
                    <i class="iconfont icon-jiantou"></i>
                </a> -->
                <router-link tag="span" to="/detail/11/pingjia">查看更多评价
                    <i class="iconfont icon-jiantou"></i></router-link>
            </div>
        </div>   
    </div> 
    </div>
   
</div>
</template>

<script>
import Vue from 'vue';
import { Swipe, SwipeItem , Loading} from 'vant';
import http from "../../util/http";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Loading);



export default {
    data(){
        return{

        }
    },
    props:{
        datail:Object
    },
    mounted(){
        console.log(this.datail,'111')
    },

  computed:{
      isShow(){
          if(this.datail){
              return false
          }else{
              return true
          }
      }
  },
 
components:{
    Swipe,
    SwipeItem,   
},
}
</script>

<style lang="scss" scoped>
  .my-swipe{
      margin-top: 5rem;
  }
  .van-swipe-item{
      height: 37.5rem;
      img{
          width: 100%;
          height: 100%;
      }
  }
  .title{
      padding: 0 1.8rem;
      margin-top: 1.2rem;
      font-size: 1.6rem;
      color: #262626;
  }
  .price{
      color: #f2270c;
      padding: 1.2rem 1.8rem;
      em{
          font-size: 3rem;
      }
  }
  .fee{
      padding: 0 1.8rem ;
      display: flex;
      justify-content: space-between;
      color: #969696;
      
      span,i{
          font-size: 1.5rem;
      }
  }
  .evaluate{
    padding: 0 1.8rem ;
    margin-top: 0.5rem;
  }
  .evaluate{
      margin-top: 2rem;

    h5{
        color: #7b7f82;
        font-weight: normal;
    }
    .pingjia{
        margin-top: 1.5rem;   
        .touxiang{
            display: inline-block;
            width: 5rem;
            height: 5rem;
            border-radius: 50%;
            background: #969696;
            position: relative;
            img{
                width: 100%;
                height: 100%;
                border-radius: 50%;
            }
            .name{
                font-size: 1.4rem;
                position: absolute;
                left: 6rem;
                top:1rem;
            }
           
        }
        .pinglun{
                margin-top: 1rem;
                font-size: 1.6rem;
        }
        .time{
            color: #7b7f82;
            margin-top: 0.3rem;
            font-size: 1.4rem;
        }
    }
    padding-bottom: 7rem;
    .seewrap{
        position: relative;
        height: 2rem;
        .see{
        width: 12rem;
        border:1px solid #8c8c8c;
        text-align: center;
        border-radius: 40px;
        padding: 1px 2px;
        margin-top: 1rem;
        position: absolute;
        top:50%;
        left: 50%;
        margin-left: -6rem;
        span{
        width: 10rem;
        height: 1.5rem;
        color: black;
        font-size: 1.5rem;
       
         .icon-jiantou{
            font-size: 1.4rem;
            }
        }
       
    }

    }
    
  }
  
</style>